<template>
  <el-dialog class="fullscreen-content" :visible.sync="dialog.showModal" fullscreen>
    <div class="warp">
      <div class="box">
        <div class="title">看板统计<span>单位：万元</span></div>
        <el-row :gutter="20" class="content">
          <el-col :span="6">
            <div v-if="mainTotal" class="content-box line">
              <div class="box-title">{{ mainTotal.orgName }}</div>
              <div class="total-list">
                <div class="total-item other-line">
                  <div class="price">{{ mainTotal.dayContractMoney|yuanToTenThousand }}</div>
                  <div class="dec">本日总保费</div>
                </div>
                <div class="total-item">
                  <div class="price">{{ mainTotal.weekContractMoney |yuanToTenThousand }}</div>
                  <div class="dec">本周总保费</div>
                </div>
                <div class="total-item">
                  <div class="price">{{ mainTotal.monthContractMoney |yuanToTenThousand }}</div>
                  <div class="dec">本月总保费</div>
                </div>
                <div class="total-item">
                  <div class="price">{{ mainTotal.yearContractMoney|yuanToTenThousand }}</div>
                  <div class="dec">本年总保费</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <el-row :gutter="20">
              <el-col v-for="(item,index) in showChildList" :key="index" :span="8">
                <div class="groups">
                  <div class="group-item">
                    <div class="group-item-title">{{ item.orgName }}</div>
                    <div class="group-content">
                      <div class="group-content-item">
                        <div class="left ohter-bg">日</div>
                        <div class="right">
                          <div class="price">{{ item.dayContractAmount |yuanToTenThousand }}</div>
                          <div>今日总保费</div>
                        </div>
                      </div>
                      <div class="group-content-item">
                        <div class="left">周</div>
                        <div class="right">
                          <div class="price">{{ item.weekContractMoney |yuanToTenThousand }}</div>
                          <div>本周总保费</div>
                        </div>
                      </div>
                      <div class="group-content-item">
                        <div class="left">月</div>
                        <div class="right">
                          <div class="price">{{ item.monthContractMoney|yuanToTenThousand }}</div>
                          <div>本月总保费</div>
                        </div>
                      </div>
                      <div class="group-content-item">
                        <div class="left">年</div>
                        <div class="right">
                          <div class="price">{{ item.yearContractMoney |yuanToTenThousand }}</div>
                          <div>本年总保费</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-button v-if="totalMoneyInfo.childList&&totalMoneyInfo.childList.length>6" class="more" type="text" @click="showMoreFn">{{ showMore?'收起':'更多' }}<i :class="showMore?'el-icon-top':'el-icon-bottom'" /></el-button>
      </div>
      <div class="box" style="margin-top:45px">
        <div class="title">保费趋势</div>
        <div class="line" style="margin-top: 30px;">
          <el-row :gutter="10" class="content">
            <el-col :span="21">
              <line-chart ref="LineChart" :total-year="totalYear" :type="'dark'" />
            </el-col>
            <el-col :span="3">
              <div class="orgList-warp">
                <div v-for="item in orgList" :key="item.orgId" class="btn" :class="item.checked?'checked':''" @click="changeTab(item.orgId)">{{ item.orgName }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import LineChart from '../LineChart';
import { deepClone } from '@/utils';

export default {
  components: {
    LineChart
  },
  props: {
    totalMoneyInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    orgList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      showMore: false,
      totalYear: {},
      dialog: {
        showModal: false
      }
    };
  },
  computed: {
    showChildList() {
      let result = this.totalMoneyInfo.childList;
      if (!this.showMore && result) {
        result = deepClone(result).splice(0, 6);
      }
      return result;
    },
    mainTotal() {
      let result;
      if (this.totalMoneyInfo.pList) {
        result = this.totalMoneyInfo.pList[0];
      }
      return result;
    }
  },
  methods: {
    showMoreFn() {
      this.showMore = !this.showMore;
    },
    changeTab(id) {
      this.orgList.forEach(el => {
        this.$set(el, 'checked', false);
        if (el.orgId === id) {
          this.$set(el, 'checked', true);
          this.$parent.searchParam.orgId = id;
          this.$parent.getTotalYear();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.fullscreen-content{
  .warp{
    padding: 48px 30px;
    .box{
      .title{
        color: #fff;
        font-size: 30px;
        font-weight: 600;
        span{
          font-size: 20px;
          padding-left: 14px;
          opacity: 0.5;
          font-weight: 500;
        }
      }
      .content{
        margin-top: 30px;
        .groups{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .group-item{
            box-sizing: border-box;
            padding: 31px 34px 34px;
            border: 1px solid #5F7BBC;
            border-radius: 20px;
            margin-bottom: 32px;
            .group-item-title{
              font-size: 20px;
              color: #fff;
            }
            .group-content{
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              .group-content-item{
                display: flex;
                margin-top: 29px;
                max-width: 50%;
                .left{
                  width: 56px;
                  height: 56px;
                  border-radius: 8px;
                  background-color: #0681FF;
                  color: #fff;
                  text-align: center;
                  line-height: 56px;
                  font-size: 24px;
                }
                .ohter-bg{
                  background-color: #F5B844;
                }
                .right{
                  padding-left: 11px;
                  font-size: 16px;
                  color: #fff;
                  width: calc(100% - 56px);
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  .price{
                    font-size: 30px;
                    font-weight: 600;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }

            }
          }
        }
        .content-box{
          padding-bottom: 75px;
          border-radius: 20px;
          .box-title{
            text-align: center;
            line-height: 38px;
            color: #fff;
            margin: 31px auto;
            width: 265px;
            height: 38px;
            background: url('./images/title.png') no-repeat;
            background-size: contain;
          }
          .total-list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0px 38px;
            .total-item{
              width: 150px;
              height: 150px;
              color: #fff;
              border-radius: 50%;
              margin-top: 38px;
              border: 8px solid #0577EC;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .price{
                font-size: 30px;
                border-bottom: 1px solid #D8D8D8;
                line-height: 1.3;
              }
              .dec{
                padding-top: 5px;
              }
            }
            .other-line{
              border: 8px solid #F5B844;
            }
          }

        }

      }
    }
    .btn{
      background: url('./images/btn-bg.png') no-repeat;
      background-size: contain;
      text-align: center;
      line-height: 43px;
      background-color: #14142B;
      color: #5F7BBC;
      width: 154px;
      height: 43px;
      margin-bottom: 10px;
      font-size: 18px;
    }
    .checked{
      background: url('./images/btn-bg1.png') no-repeat;
      background-size: contain;
      background-color: #057DF7;
      color: #fff;
    }
  }
  .more{
    float: right;
    margin-top: 20px;
  }
  .orgList-warp{
    overflow-y: auto;
    overflow-x: visible;
  }
  .orgList-warp::-webkit-scrollbar{
    display: none;
  }
  .line{
    border: 1px solid #5F7BBC;
    border-radius: 20px;
  }
}
</style>
